<template>
  <div class="floating-icon"
       :style="{ bottom: bottom + 'px', left: left + 'px' }">
    <Popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="right">
      <template #reference>
        <!--      <div class="floating-icon"-->
        <!--           :style="{ bottom: bottom + 'px', right: right + 'px' }">-->
        <Icon name="add" size="40" color="#5d9594"/>
        <!--      </div>-->
      </template>
    </Popover>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {Icon, Popover, Toast} from 'vant';
import router from "@/router";
const bottom = ref(80); // 默认距离底部的距离
const left = ref(10); // 默认距离右侧的距离

const handleClick = () => {
  // 处理点击事件，可以在这里添加具体的点击处理逻辑
  console.log('Floating icon clicked');
};

const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '新建群聊',icon: 'friends' }
];
const onSelect = (action) => {
  router.push({ name: 'add_group' });
};
</script>

<style scoped>
.floating-icon {
  position: fixed; /* 使用 fixed 定位使其浮动在页面上 */
  cursor: pointer; /* 鼠标移上去显示手型 */
  z-index: 1000; /* 控制图标的层级，避免被其他元素遮挡 */
  border-color: white;
}
</style>